 <template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="moneyTotal" ref="topData">
            <div class="item">
              <div class="money">{{topData.pointsTotal}}</div>
              <div class="text">总积分(积分)</div>
            </div>
            <div class="item">
              <div class="money">{{topData.exchangeTotalPoints}}</div>
              <div class="text">已总积分(积分)</div>
            </div>
           <!-- <div class="item">
              <div class="money">{{topData.exchangeTotalPoints}}</div>
              <div class="text">可兑换总积分(积分)</div>
            </div> -->

            <div class="item">
              <div class="money">{{topData.pointsCurrentToatl}}</div>
              <div class="text">可用总积分(积分)</div>
            </div>
        </div>
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="telephone">
                <el-input v-model="searchForm.telephone" clearable placeholder="用户手机号"></el-input>
            </el-form-item>
            <el-form-item prop="actualPaymentStart" label="实付合计金额:" class="numberGroup">
               <el-col :span="11">
                <el-input v-model="searchForm.actualPaymentStart" clearable placeholder=""></el-input>
               </el-col>
               <el-col style="text-align: center;" :span="2">-</el-col>
               <el-col :span="11">
                <el-input v-model="searchForm.actualPaymentEnd" clearable placeholder=""></el-input>
               </el-col>
            </el-form-item>
            <el-form-item prop="pointsCurrentStart" label="可用总积分:" class="numberGroup">
               <el-col :span="11">
                <el-input v-model="searchForm.pointsCurrentStart" clearable placeholder=""></el-input>
               </el-col>
               <el-col style="text-align: center;" :span="2">-</el-col>
               <el-col :span="11">
                <el-input v-model="searchForm.pointsCurrentEnd" clearable placeholder=""></el-input>
               </el-col>
            </el-form-item>
            <el-form-item prop="givePointsStart" label="赠送总积分:" class="numberGroup">
               <el-col :span="11">
                <el-input v-model="searchForm.givePointsStart" clearable placeholder=""></el-input>
               </el-col>
               <el-col style="text-align: center;" :span="2">-</el-col>
               <el-col :span="11">
                <el-input v-model="searchForm.givePointsEnd" clearable placeholder=""></el-input>
               </el-col>
            </el-form-item>
            <el-form-item prop="time">
               <el-date-picker v-model="time" type="daterange" align="right" unlink-panels range-separator="至"
                 start-placeholder="兑换开始日期" end-placeholder="兑换结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                 :picker-options="pickerOptions">
               </el-date-picker>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
            </el-form-item>
            <div class="actionBtnRight" style="margin-left:auto">

            </div>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <el-radio-group v-model="searchForm.pointsLevelId" size="small" @change="handleSearch()" >
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button :label="item.id" v-for="item in pointsLevelList">{{item.name}}</el-radio-button>
            </el-radio-group>
            <el-button
              style="margin-left:10px"
              type="warning"
              icon="el-icon-download"
              size="small"
              :loading="btnLoading"
              @click="handleExport"
            >导出</el-button>
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet>
          </div>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;" :height="tableHeight" v-loading='loading'  stripe border>
             <el-table-column label="序号" type="index" width="50" v-if="!hideTableColumn.includes('index')" align="center"></el-table-column>
            <el-table-column prop="telephone" label="用户手机号" v-if="!hideTableColumn.includes('telephone')" align="center"></el-table-column>
            <el-table-column prop="pointsLevelName" label="积分等级" v-if="!hideTableColumn.includes('pointsLevelName')" align="center"></el-table-column>
            <el-table-column prop="orderTotal" label="订单合计金额(元)" v-if="!hideTableColumn.includes('orderTotal')" align="center"></el-table-column>
            <el-table-column prop="actuallyAmount" label="实付合计金额(元)" v-if="!hideTableColumn.includes('actuallyAmount')" align="center"></el-table-column>
            <el-table-column prop="receiptsAmount" label="实收合计金额(元)" v-if="!hideTableColumn.includes('givePointsTotal')" align="center"></el-table-column>
            <el-table-column prop="givePointsTotal" label="赠送合计积分(积分)" v-if="!hideTableColumn.includes('getMoney')" align="center"></el-table-column>
            <el-table-column prop="exchangePointsNum" label="已兑换合计积分(积分)" v-if="!hideTableColumn.includes('exchangePointsNum')" align="center"></el-table-column>
            <el-table-column prop="pointsCurrent" label="可兑换合计积分(积分)" v-if="!hideTableColumn.includes('pointsCurrent')" align="center"></el-table-column>
            <el-table-column prop="exchangeTime" label="最新兑换日期" v-if="!hideTableColumn.includes('exchangeTime')" align="center"></el-table-column>
            <el-table-column prop="name" label="操作" width="140" fixed="right" align="center">
              <template #default="scope">
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-money"
                    @click="hanleConversionApply(scope.row)"
                  >兑换申请</el-button>
                  <ExchangeRecord :id="scope.row.customerId" :statusRow="scope.row"  text="兑换记录"  ></ExchangeRecord>

              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="dataInfo"
          />
        </div>
      </el-col>
    </el-row>

    <!-- /*兑换申请 */	 -->
    <el-dialog title="兑换申请" width="600px" v-dialogDrag :visible.sync="conversionAuditVisible" @close="conversionAuditVisible = false" :close-on-click-modal="false" >
      <el-form  label-position="right" :model="conversionAuditForm" :rules="conversionAuditRules" ref="conversionAuditForm">
          <el-form-item label="手机号为:" label-width="175px">
            <span class="red">{{statusRow.telephone}}</span> 用户的积分兑换股票申请
          </el-form-item>
          <el-form-item label="可兑换积分:" label-width="175px">
            <span class="red">{{statusRow.pointsCurrent}}</span> 积分
          </el-form-item>

          <el-form-item label="需要扣除积分:" prop="value" label-width="175px">
            <el-input v-model="conversionAuditForm.value" clearable placeholder="需要扣除积分" type="number" class="inputNumber" :max="statusRow.pointsCurrent"></el-input> 积分
          </el-form-item>
          <el-form-item label="兑换票数:" prop="exchangeValue" label-width="175px">
            <el-input v-model="conversionAuditForm.exchangeValue" clearable  placeholder="兑换票数" type="number" class="inputNumber"></el-input> 票
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="conversionAuditVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSubmitConversionAudit('conversionAuditForm')" size="small" :loading="btnLoading">提交申请</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    orderPointsExport,
    orderPointsList,
    orderPointsQuery,
    pointsAdd
  } from '@/api/getData'
  import option from '../../common/option.js';
  import ExchangeRecord from '../user/components/exchangeRecord';
  export default {
    components: {
      ExchangeRecord
    },
    data() {
      var checkIntegral = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('需要扣除积分不能为空'));
        }
        setTimeout(() => {
          if (Number(value) > this.statusRow.pointsCurrent) {
            callback(new Error('需要扣除积分必须小于等于'+this.statusRow.pointsCurrent));
          } else {
            callback();
          }
        }, 300);
      };
      return {
        loading: false,
        btnLoading:false,
        time:[],
        pointsLevelList:[],
        searchForm: {
          actualPaymentEnd:'',
          actualPaymentStart:'',
          givePointsEnd:'',
          givePointsStart:"",
          pointsCurrentStart:'',
          pointsCurrentEnd:'',
          telephone:"",
          pointsLevelId:'',
          pageNum: 1,
          pageSize: 20,
        },
        tableColumn:[{/*自定义表格列*/
            name:'序号',
            value:'index'
        },{
            name:'用户手机号',
            value:'telephone'
        },{
            name:'积分等级',
            value:'pointsLevelName'
        },{
            name:'订单合计金额(元)',
            value:'orderTotal'
        },{
            name:'实付合计金额(元)',
            value:'actuallyAmount'
        },{
            name:'实收合计金额(元)',
            value:'receiptsAmount'
        },{
            name:'赠送合计积分(积分)',
            value:'givePointsTotal'
        },{
            name:'已兑换合计积分(积分',
            value:'exchangePointsNum'
        },{
            name:'可兑换合计积分(积分)',
            value:'pointsCurrent'
        },{
            name:'最新兑换日期',
            value:'exchangeTime'
        }],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        dataList:[],
        total: 0,
        topData:{},

        dialogTitle: '',
        statusRow:{},

        conversionAuditVisible:false,
        conversionAuditForm:{
          customerId:'',
          value:'',
          exchangeValue:''
        },
        conversionAuditRules:{
          value: [{required: true,validator: checkIntegral,trigger: 'blur'}],
           exchangeValue: [{required: true, message: '兑换票数不能为空',trigger: 'blur'}],
        },
      }
    },
    created() {

    },
    computed:{
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.getCategoryDetails({categoryKey:'points_level_config'}).then(res=>{ this.pointsLevelList = res.data; });
      this.getTopDataFN();
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.topData.offsetHeight  - this.$refs.search.offsetHeight  - this.$refs.actionBtn.offsetHeight  - this.$refs.page.offsetHeight - 65;
      })
    },
    methods: {
      handleSubmitConversionAudit(formName) {
        /*提额申请*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.statusRow.usableUnionIncome<this.conversionAuditForm.value){
               this.$message.error('申请提取金额不能大于'+this.statusRow.usableUnionIncome);
              return;
            }
            this.btnLoading = true;
            pointsAdd(this.conversionAuditForm).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.conversionAuditVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.msg);
              }
              this.btnLoading = false;
            });
          }
        })
      },
      /*兑换申请*/
      hanleConversionApply(row){
        this.statusRow = row;
        this.conversionAuditForm.customerId = row.customerId;
        this.conversionAuditForm.value = '';
        this.conversionAuditForm.exchangeValue = '';
        this.conversionAuditVisible = true;
      },
      /** 导出按钮操作 */
      handleExport() {
       let data = this.addDateRange(this.searchForm, this.time, 'exchangeTimeStart', 'exchangeTimeEnd');
        this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
          this.btnLoading = true;
          return orderPointsExport(data);
        }).then(response => {
          this.$download.name(response.msg);
          this.btnLoading = false;
        }).catch(() => {});
      },
      getTopDataFN(){
        let data = this.addDateRange(this.searchForm, this.time, 'exchangeTimeStart', 'exchangeTimeEnd');
        orderPointsQuery(data).then((res)=>{
          this.topData = res.data;
        })
      },
      resetSearch(){
        this.searchForm.pageNum = 1;
        this.searchForm.actualPaymentEnd = '';
        this.searchForm.givePointsEnd = '';
        this.searchForm.pointsCurrentEnd = '';
        this.time = [];
        this.resetForm('searchForm');
        this.getTopDataFN();
        this.dataInfo();
      },
      handleSearch(){
          this.getTopDataFN();
          this.dataInfo();
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.time, 'exchangeTimeStart', 'exchangeTimeEnd');
          this.loading = true;
          const result = await orderPointsList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },

    }
  }
</script>

<style scoped lang="scss">
  .inputNumber{
    width:200px;
  }
  .numberGroup /deep/ .el-input{
    width: 90px!important;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
</style>
